Skip to main content
Version: Next

Status tag

Overview​

Tag for categorizing or markup.

When To Use​

It can be used to tag by dimension or property. When categorizing. We have defined 2 props that need to be passed to use the StatusTag component: color, text . You must transmit the HEX color code following the format #RRGGBB and with prop text in string format, we can use hooks to convert language here.

How To Use​

import StatusTag from 'components/StatusTag';
import { BOOKING_STATUS } from 'utils/constants';


<StatusTag
    color={BOOKING_STATUS[statusKey]?.color}
    text={t(`bookingStatus:${BOOKING_STATUS[statusKey]?.text}`)}
  />

References​

Ant design - Tag
Ant design - Typography